<template>
	<div class="view">
		 <Modal 
        		v-model="data.isShow"
        		width="500px">
        		<p slot="header">
	            <span>作品属性编辑</span>
	        </p>
	        
			<Form ref="form" 
				:model="data.data" 
				:rules="ruleValidate" 
				:label-width="80">
		        <Form-item 
		        		label="名称" 
		        		prop="name" 
		        		style="width: 450px;">
		            <Input type="text" v-model="data.data.name"></Input>
		        </Form-item>
		        <Form-item 
		        		label="背景颜色" 
		        		prop="bgColor" 
		        		style="width: 300px;">
						<div class="color-item">
			        			<colorPicker 
			        				v-model="data.data.bgColor" 
			        				:defaultColor="data.data.bgColor"
			        				style="border: 1px solid #E1E7E9;">
			        			</colorPicker>
			        			<Input 
				        			class="color-val"
				            		type="text" 
				            		size="small"
				            		v-model="data.data.bgColor">
				            	</Input>
			        		</div>
		        </Form-item>
		        
		        <Form-item 
		        		label="边框颜色" 
		        		prop="strokeColor" 
		        		style="width: 300px;">
		        		<div class="color-item">
						<colorPicker 
							v-model="data.data.strokeColor" 
							:defaultColor="data.data.strokeColor"
							style="border: 1px solid #E1E7E9;">
						</colorPicker>
						<Input 
							class="color-val"
							type="text" 
							size="small"
							v-model="data.data.strokeColor">
						</Input>
					</div>
				</Form-item>
				
		        <Form-item 
		        		label="字体颜色" 
		        		prop="textColor" 
		        		style="width: 300px;">
					<div class="color-item">
						<colorPicker 
							v-model="data.data.textColor" 
							:defaultColor="data.data.textColor"
							style="border: 1px solid #E1E7E9;">
						</colorPicker>
						<Input 
							class="color-val"
							type="text" 
							size="small"
							v-model="data.data.textColor">
						</Input>
					</div>
			    </Form-item>
		        <Form-item 
		        		label="票房" 
		        		prop="hasBoxOffice">
		            <i-switch v-model="data.data.hasBoxOffice">
				        <span slot="open">有</span>
				        <span slot="close">无</span>
				    </i-switch>
		        </Form-item>
		        <Form-item 
		        		label="集数" 
		        		prop="hasEpisodes">
		            <i-switch v-model="data.data.hasEpisodes">
				        <span slot="open">有</span>
				        <span slot="close">无</span>
				    </i-switch>
		        </Form-item>
		        <Form-item 
		        		label="片长" 
		        		prop="hasDuration">
		            <i-switch v-model="data.data.hasDuration">
				        <span slot="open">有</span>
				        <span slot="close">无</span>
				    </i-switch>
		        </Form-item>
		        <Form-item 
		        		label="实例">
		            <span class="label-item" v-text="data.data.name"
		            	v-bind:style="{'background-color':data.data.bgColor, 'color': data.data.textColor, 'border':'1px solid '+ data.data.strokeColor}"></span>
		        </Form-item>
		    </Form>
		    
		    <div slot="footer">
	           	<Button type="primary" 
	           		:loading="data.isBtnLoading" 
	           		@click="handleSubmit('form')">{{data.submitBtnTxt}}</Button>
	            <Button type="ghost" 
	            		:disabled="data.isBtnLoading" 
	            		@click="handleCancel('form')" 
	            		style="margin-left: 8px">关闭</Button>
	        </div>
	     </Modal>
	</div>

</template>

<script>

	export default {
		name: 'CWorksAttrEditModal',
		props: ['data'],
		components: {  },
		data() {
			return {
				ruleValidate: {
                    name: [
                        { required: true, message: '名称不能为空', trigger: 'blur' }
                    ]
                }
			}
		},
		mounted: function() {
		},
		methods: {
			handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    		console.log(this.params);
                    		this.$emit('on-submit', this.data.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            handleCancel (name) {
              	this.data.isShow = false;
            }
		}
	}
</script>

<style scoped="scoped">
	.view {
		padding: 20px;
	}
	.label-item {
		border-radius: 3px;
		padding: 2px 5px;
	}
</style>

<style>
	.m-colorPicker .box{
		z-index: 999;
	}
	.color-item {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
	}
	.color-val {
		margin-left: 10px;
	}
</style>